<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>样式的绑定</title>
		<style>
			.atguigu{
				border: 1px solid black;
			}
			.demo1{
				background-color: skyblue;
			}
			.demo2{
				color: rgb(214, 2, 2);
			}
			.demo3{
				text-shadow: 2px 2px 2px yellow;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			1. 绑定class样式
						写法:class="xxx" xxx可以是字符串、对象、数组
							字符串写法适用于：类名不确定，要动态获取
							对象写法适用于：类名确定，但不确定用不用
							数组写法适用于：同时动态的绑定多个class样式
			2. 绑定style样式
						:style="{fontSize: xxx}"其中xxx是data中配置的属性
		 -->
		<!-- 准备好一个容器-->
		<div id="root">

			<!-- 动态绑定class的字符串写法，适用于：要绑定样式名，但具体的名不知道 -->
			<h2 class="atguigu" :class="t1">你好</h2>
			
			<!-- 动态绑定class的数组写法，适用于：同时绑定多个class -->
			<h2 class="atguigu" :class="[t1,t2]">你好</h2>

			<!-- 动态绑定class的对象写法，适用于：class名已知，但具体加不加样式要动态判断 -->
			<h2 class="atguigu" :class="{demo1:hasD1,demo2:hasD2}">你好</h2>
			
			<!-- 动态绑定style样式 -->
			<h2 class="atguigu demo3" :class="{demo1:hasD1,demo2:hasD2}" :style="{fontSize}">你好</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				hasD1:true,
				hasD2:true,
				t1:'demo1',
				t2:'demo2',
				t3:'demo3',
				fontSize:'40px'
			}
		})
	</script>
	
</html>